<script setup lang="ts">
import handlePopover from '@renderer/utils/handlePopover'
import FormButton from './formButton.vue'

const props = defineProps<{
  carpenterFormItem: collectionItemModel[]
}>()
const emit = defineEmits<{
  (e: 'startCompute'): void
}>()
const { findPopoverContent } = handlePopover()
const handleComputeLong = () => {
  emit('startCompute')
}
const handleComputeHouseLong = (houseList: RoomListModel[]) => {
  let houseLong = 0
  houseList.forEach((item: RoomListModel) => {
    switch (item.name) {
      case '客厅':
      case '餐厅':
      case '主卧':
      case '次卧1':
      case '次卧2':
      case '次卧3':
      case '次卧4':
      case '衣帽间':
        houseLong += Number(item.width_room) * Number(item.curtain_box)
        break
      case '阳台1':
      case '阳台2':
      case '阳台3':
      case '阳台4':
        houseLong += Number(item.width_window) * Number(item.curtain_box)
    }
  })
  props.carpenterFormItem[0].number = houseLong
}
defineExpose({
  handleComputeHouseLong,
})
</script>

<template>
  <el-form :model="props.carpenterFormItem">
    <div class="flex justify-end mb-4">
      <FormButton @click="handleComputeLong">计算窗帘盒长</FormButton>
    </div>
    <el-row :gutter="20">
      <template v-for="(item, index) in props.carpenterFormItem" :key="index">
        <el-col :span="8">
          <el-form-item :key="index" label-width="130">
            <template #label>
              <span @click="findPopoverContent(item.name)">{{ item.name + ':' }}</span>
            </template>
            <el-input v-model="item.number" type="number" @mousewheel.native.prevent placeholder="请输入" v-if="item.type == 1">
              <template #append>{{ item.unit }}</template>
            </el-input>
            <el-radio-group v-model="item.number" placement="row" v-else>
              <el-radio label="是" :value="1" :customStyle="{ marginRight: '35px' }" />
              <el-radio label="否" :value="0" />
            </el-radio-group>
          </el-form-item>
        </el-col>
      </template>
    </el-row>
  </el-form>
</template>

<style lang="scss" scoped>
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #ff9600 !important;
}
.el-form-item {
  margin-bottom: 10px;
  margin-right: 20px !important;
  flex: 1;
  display: flex;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: #ff9600 !important;
  border-color: #ff9600 !important;
}
</style>
